<!-- 国庆节页面 -->
<template>
<view class="gqj-box">
    <page-head :transparent="true">
      <slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
      <slot slot="right">{{''}}</slot>
    </page-head>

    <!--S = banner图片-->
    <view class="banner">
        <image :src="gqjbanner1" mode="widthFix"></image>
        <image :src="gqjbanner2" mode="widthFix"></image>
    </view>
    <!--E = banner图片-->
    
     <!--S = 爆款推荐-->
    <view class="banner">
        <image :src="item.img" mode="widthFix" v-for="(item, index) in hotstylelist" :key="index" @click="linkTo(item.url, index)"></image>
    </view>
    <!--E = 爆款推荐-->

    <!--S = 旅游美美哒-->
    <view class="banner">
        <image :src="travel1" mode="widthFix"></image>
        <image :src="item.img" mode="widthFix" v-for="(item, index) in travellist" :key="index" @click="linkTo(item.url, index)"></image>
    </view>
    <!--E = 旅游美美哒-->

    <!--S = 无忧无虑出门嗨-->
    <view class="banner">
        <image :src="outofhi1" mode="widthFix"></image>
        <image :src="item.img" mode="widthFix" v-for="(item, index) in outofhilist" :key="index" @click="linkTo(item.url, index)"></image>
    </view>
    <!--E = 无忧无虑出门嗨-->

    <!--S = 随时随地能量-->
    <view class="banner">
        <image :src="energy1" mode="widthFix"></image>
        <image :src="item.img" mode="widthFix" v-for="(item, index) in energylist" :key="index" @click="linkTo(item.url, index)"></image>
        <image :src="last" mode="widthFix" @click="selfdetail"></image>
    </view>
    <!--E = 随时随地能量-->
  </view>
</template>

<script>
import gqjbanner1 from "../../static/img/gqj/gqjbanner1.png";
import gqjbanner2 from "../../static/img/gqj/gqjbanner2.png";

import hotstyle1 from "../../static/img/gqj/hotstyle1.png";
import hotstyle2 from "../../static/img/gqj/hotstyle2.png";
import hotstyle3 from "../../static/img/gqj/hotstyle3.png";

import travel1 from "../../static/img/gqj/travel1.png";
import travel2 from "../../static/img/gqj/travel2.png";
import travel3 from "../../static/img/gqj/travel3.png";
import travel4 from "../../static/img/gqj/travel4.png";
import travel5 from "../../static/img/gqj/travel5.png";

import outofhi1 from "../../static/img/gqj/outofhi1.png";
import outofhi2 from "../../static/img/gqj/outofhi2.png";
import outofhi3 from "../../static/img/gqj/outofhi3.png";
import outofhi4 from "../../static/img/gqj/outofhi4.png";
import outofhi5 from "../../static/img/gqj/outofhi5.png";

import energy1 from "../../static/img/gqj/energy1.png";
import energy2 from "../../static/img/gqj/energy2.png";
import energy3 from "../../static/img/gqj/energy3.png";
import energy4 from "../../static/img/gqj/energy4.png";
import energy5 from "../../static/img/gqj/energy5.png";

import last from "../../static/img/gqj/last.png";
export default {
  data() {
    return {
      title: "国庆出游",
      gqjbanner1: gqjbanner1,
      gqjbanner2: gqjbanner2,
      hotstyle1: hotstyle1,
      hotstyle2: hotstyle2,
      hotstyle3: hotstyle3,
      travel1: travel1,
      travel2: travel2,
      travel3: travel3,
      travel4: travel4,
      travel5: travel5,
      outofhi1: outofhi1,
      outofhi2: outofhi2,
      outofhi3: outofhi3,
      outofhi4: outofhi4,
      outofhi5: outofhi5,
      energy1: energy1,
      energy2: energy2,
      energy3: energy3,
      energy4: energy4,
      energy5: energy5,
      last: last,
      //爆款推荐数据
      hotstylelist: [
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10929&cid=279&title=%E5%8D%A1%E5%A9%B7%EF%BC%88CATKIN%EF%BC%89%E5%8F%A3%E7%BA%A2%E7%9F%A5%E5%90%A6%E8%81%94%E5%90%8D%E5%90%8C%E6%AC%BEIP%E5%AE%9A%E5%88%B6%E7%A4%BC%E7%9B%92%20%E5%8D%97%E5%9B%BD%E7%BA%A2%E8%B1%86%EF%BC%88%E7%BA%A2%EF%BC%89%20%E5%88%9D%E5%AD%A6%E8%80%85%E5%BD%A9%E5%A6%86%E5%8F%A3%E7%BA%A2%E8%85%AE%E7%BA%A2%E7%9C%89%E7%AC%944%E4%BB%B6%E5%A5%97%E8%A3%85%E5%A5%B3&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: hotstyle1
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10930&cid=371&title=%E5%8D%9A%E5%85%BF%EF%BC%88BOYI%EF%BC%89%E4%B8%87%E5%90%91%E8%BD%AE%E6%8B%89%E6%9D%86%E7%AE%B120%E8%8B%B1%E5%AF%B8%E7%94%B7%E5%A5%B3%E5%A3%AB%E7%99%BB%E6%9C%BA%E7%AE%B1%E8%BD%BB%E7%9B%88%E8%A1%8C%E6%9D%8E%E7%AE%B1%20BY-72001%E7%8E%AB%E7%91%B0%E9%87%91&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: hotstyle2
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10931&cid=420&title=%E6%B5%B7%E4%BF%AA%E6%81%A9%E7%9C%BC%E9%95%9C%20%E5%81%8F%E5%85%89%E5%A4%AA%E9%98%B3%E9%95%9C%E5%A5%B3%E6%AC%BE%20%E6%97%B6%E5%B0%9A%E5%A4%A7%E6%A1%86%E7%8C%AB%E7%9C%BC%E5%A2%A8%E9%95%9C%20N6609%20%E9%80%8F%E6%98%8E%E6%B5%85%E7%B2%89%E6%A1%86%20%E6%9E%9C%E5%86%BB%E7%B2%89%E7%89%87N17&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: hotstyle3
        }
      ],
      //旅游美美哒数据
      travellist: [
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=3643&cid=276&title=%E6%9B%BC%E7%A7%80%E9%9B%B7%E6%95%A6%EF%BC%88Mentholatum%EF%BC%89%E6%96%B0%E7%A2%A7%E8%BD%BB%E9%80%8F%E6%B0%B4%E6%84%9F%E9%98%B2%E6%99%92%E5%96%B7%E9%9B%BE150ml%EF%BC%88%E9%98%B2%E6%99%92%E9%9C%9C%E7%94%B7%E5%A5%B3%20%E9%9A%94%E7%A6%BB%E4%B9%B3%20%E4%BF%9D%E6%B9%BF%E9%94%81%E6%B0%B4%20%E5%90%B4%E6%98%95%E6%98%8E%E6%98%9F%E5%90%8C%E6%AC%BE%EF%BC%89%E5%A5%B3%E5%A3%AB%E6%8A%A4%E8%82%A4&seller=%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5`,
          img: travel2
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=1319&cid=93&title=%E9%9F%A9%E6%9D%9F%E6%8A%A4%E8%82%A4%E5%A5%97%E8%A3%85%E5%8C%96%E5%A6%86%E5%93%81%E8%A1%A5%E6%B0%B4%E4%BF%9D%E6%B9%BF%E6%B7%A1%E5%8C%96%E7%BB%86%E7%BA%B9%20%E7%BA%A2%E7%9F%B3%E6%A6%B4%E7%BA%A2%E9%A2%9C%E7%A4%BC%E7%9B%92%E5%85%AB%E4%BB%B6%E5%A5%97%EF%BC%88%E6%B4%97%E9%9D%A2%E5%A5%B6%20%E7%88%BD%E8%82%A4%E6%B0%B4%20%E4%B9%B3%E6%B6%B2%20%E9%9D%A2%E8%86%9C%20%E6%97%85%E8%A1%8C%E8%A3%85%EF%BC%89&seller=%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5`,
          img: travel3
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10932&cid=320&title=%E5%B1%88%E8%87%A3%E6%B0%8F%20%E9%AA%A8%E8%83%B6%E5%8E%9F%E9%A9%AC%E6%B2%B9%E5%B1%B1%E8%8C%B6%E8%8A%B1%E6%B8%85%E6%B6%A6%E6%B4%97%E6%8A%A4%E5%A5%97%E8%A3%85%28%E6%B4%97%E5%8F%91%E9%9C%B2%20%E6%B6%A6%E5%8F%91%E4%B9%B3%20%E6%B2%90%E6%B5%B4%E9%9C%B2%2950%E6%AF%AB%E5%8D%87X3%20%E6%97%85%E8%A1%8C%E5%A5%97%E8%A3%85%E5%B0%8F%E6%A0%B7&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: travel4
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10933&cid=1039&title=%E5%8A%A0%E5%8A%A0%E6%9E%97%2050%E7%B2%92%E8%A3%85%E4%B8%80%E6%AC%A1%E6%80%A7%E5%8E%8B%E7%BC%A9%E6%AF%9B%E5%B7%BE%20%E5%85%A8%E6%A3%89%E6%97%85%E6%B8%B8%E6%97%85%E8%A1%8C%E4%BE%BF%E6%90%BA%E6%B4%97%E8%84%B8%E5%B7%BE%E7%BE%8E%E5%AE%B9%E6%B4%81%E9%9D%A2%E5%B7%BE%E5%B0%8F%E6%96%B9%E5%B7%BE&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: travel5
        }
      ],
      //无忧无虑出门嗨
      outofhilist: [
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10934&cid=1039&title=%E8%93%9D%E6%A9%99LYCEEM%20%E6%97%85%E8%A1%8C%E7%BB%8F%E5%85%B8%E6%B4%97%E6%BC%B1%E5%8C%85%E6%94%B6%E7%BA%B3%E5%8C%85%20%E9%BB%91%E8%89%B2%20%E4%BE%BF%E6%90%BA%E9%98%B2%E6%B3%BC%E6%B0%B4&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: outofhi2
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10935&cid=395&title=%E5%87%AF%E8%92%82%E7%8C%AB%EF%BC%88Hello%20Kitty%EF%BC%89%E5%AD%90%E5%BC%B9%E5%A4%B4%E4%BF%9D%E6%B8%A9%E6%9D%AF%E5%84%BF%E7%AB%A5304%E4%B8%8D%E9%94%88%E9%92%A2%E7%9C%9F%E7%A9%BA%E4%BF%9D%E6%B8%A9%E5%A3%B6%E4%BE%BF%E6%90%BA%E6%97%85%E8%A1%8C%E5%A3%B6%E7%94%B7%E5%A5%B3%E5%A3%AB%E6%B0%B4%E6%9D%AF%E5%AD%90450ml%E7%8E%AB%E7%BA%A2%E8%89%B2&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: outofhi3
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=8089&cid=319&title=%E9%AB%98%E9%9C%B2%E6%B4%81%EF%BC%88Colgate%EF%BC%89%20%E4%BE%BF%E6%90%BA%E5%BC%8F%E6%97%85%E8%A1%8C%E5%A5%97%E8%A3%85%20%EF%BC%88%E5%A4%87%E9%95%BF%E7%82%AD%E6%B7%B1%E6%B4%81%E7%89%99%E8%86%8F40g%20%E6%8A%A4%E9%BE%88%E7%89%99%E5%88%B7%EF%BC%89%20%28%E9%A2%9C%E8%89%B2%E9%9A%8F%E6%9C%BA%E5%8F%91%E6%94%BE%29&seller=%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5`,
          img: outofhi4
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=3411&cid=70&title=%E5%85%AD%E7%A5%9E%E9%A9%B1%E8%9A%8A%E8%8A%B1%E9%9C%B2%E6%B0%B4%EF%BC%88%E5%86%B0%E8%8E%B2%E9%A6%99%E5%9E%8B%EF%BC%89%EF%BC%88%E4%B8%93%EF%BC%8930ml%20%E4%BE%BF%E6%90%BA%E8%A3%85%E6%97%85%E8%A1%8C%E8%A3%85%20%E6%88%B7%E5%A4%96%E4%BE%BF%E6%90%BA%E9%A9%B1%E8%9A%8A%E6%B0%B4%E9%A9%B1%E8%9A%8A%E6%B6%B2%E6%88%B7%E5%A4%96%E9%98%B2%E8%9A%8A%E6%B6%B2%E8%9A%8A%E6%80%95%E6%B0%B4&seller=%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5`,
          img: outofhi5
        }
      ],
      //随时随地能量
      energylist: [
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10939&cid=125&title=%E9%A6%99%E7%96%86%E6%81%AC%E8%AF%AD%20%E5%B9%B2%E6%9E%9C%E9%9B%B6%E9%A3%9F%E5%B0%8F%E5%90%83%20%E7%BC%A4%E7%BA%B7%E6%B7%B7%E5%90%88%E6%9E%9C%E4%BB%81%E7%A4%BC%E5%93%81%20%E6%9E%9C%E6%A0%B8%E4%BC%A0%E5%A5%87%E4%B9%8B%E6%AF%8F%E6%97%A5%E5%9D%9A%E6%9E%9C%E7%BB%8F%E5%85%B8%E6%AC%BE300g%2F%E7%BD%90&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: energy2
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10937&cid=1157&title=%E4%B9%85%E4%B9%85%E4%B8%AB%20%20%20%E9%B8%AD%E8%82%89%E7%B1%BB%E5%8D%A4%E5%91%B3%E5%B0%8F%E5%90%83%E4%BC%91%E9%97%B2%E9%9B%B6%E9%A3%9F%20%20%20%E7%A7%98%E5%88%B6%E9%B8%AD%E8%88%8C63g%2F%E8%A2%8B&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: energy3
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=7292&cid=126&title=%E5%8D%AB%E9%BE%99%20%E4%BC%91%E9%97%B2%E9%9B%B6%E9%A3%9F%20%E7%BD%91%E7%BA%A2%E8%BE%A3%E6%9D%A1%20%E6%80%80%E6%97%A7%E9%9B%B6%E9%A3%9F%E5%A4%A7%E7%A4%BC%E5%8C%85%20%E5%A4%A7%E9%9D%A2%E7%AD%8B%20%E5%B0%8F%E9%9D%A2%E7%AD%8B%20%E4%BA%B2%E5%98%B4%E7%83%A7%E5%88%86%E4%BA%AB%E7%BB%84%E5%90%88%E8%A3%85888g%2F%E8%A2%8B&seller=%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5`,
          img: energy4
        },
        {
          url: `http://bncf2h5.sqqmall.com/#/pages/selfdetail/selfdetail?skuId=10938&cid=127&title=%E9%A6%99%E7%96%86%E6%81%AC%E8%AF%AD%20%E9%80%81%E7%A4%BC%E6%96%B0%E7%96%86%E7%89%B9%E4%BA%A7%20%E5%B9%B2%E6%9E%9C%E9%9B%B6%E9%A3%9F%20%E6%9E%A3%E6%A0%B8%E4%B9%8B%E6%81%8B%20%E4%B8%80%E7%BA%A7%E5%92%8C%E7%94%B0%E7%BA%A2%E6%9E%A3%E5%A4%B9%E6%A0%B8%E6%A1%83%E4%BB%81%E5%A4%B9%E5%BF%83%E6%9E%A3%20500g%2F%E7%9B%92&seller=%E5%A5%BD%E5%93%81%E8%B4%AD`,
          img: energy5
        }
      ]
    };
  },
  methods: {
    //跳转详情页
    linkTo(dataUrl, index) {
      let url = dataUrl.substr(dataUrl.indexOf("#") + 2).replace("pages", "..");
      if (url !== "") {
        onEvent(
          "page_home_top_banner1_goods" + (parseInt(index) + parseInt(1))
        );
        setTimeout(function() {
          if (url !== "") {
            h5NavigateTo({
              url: decodeURI(url)
            });
          }
        }, 1000);
      }
    },
    // 点击跳转到好品购页面
    selfdetail() {
      h5NavigateTo({
        url: "../selfsupport/selfsupport?title=好品购&cat_id=0"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.gqj-box {
  width: 100%;
  background: #2c807e;
  .banner {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;

    image {
      width: 100%;
      display: block;
    }
  }
}
</style>